<template>
  <div class="theme">
    <div class="left">
      <el-scrollbar @scroll="onScroll" height="calc(100vh - 160px)" class="left-content">
        <el-form ref="ruleFormRef" :model="form" :rules="rules" class="demo-ruleForm" label-position="top">
          <Card class="center-card" :cardList="cardList" :form="form" />
        </el-form>
      </el-scrollbar>
    </div>

    <div class="right">
      <Nav :headers="navArr" @onScrollNav="onScrollNav" :toId="toId"></Nav>
    </div>
    <div class="footer">
      <div class="footer-button">
        <el-button type="primary" @click="settingSave" size="small">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import Card from '@/common/components/card/index.vue'
import Nav from '@/common/components/right-nav/index.vue'
import { getAgentConfig, updateAgentConfig } from '@app/call-center/apis/client-setting'
import { clientSettingModule } from '@/app/call-center/store/modules/client-setting'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'AdminMain',
  components: {
    Card,
    Nav
  },
  // ----------------生命周期-----------------------
  setup() {
    const state = reactive({
      toId: 'a',
      // navArr: ['登录初始状态', '自动切换状态', '禁止呼入挂机', '禁止外呼挂机'],
      navArr: [
        { name: '自动跳转', id: 'a' },
        { name: '振铃卡片', id: 'b' },
        { name: '浏览器提醒', id: 'c' }
      ],
      cardList: [
        {
          id: 'a',
          type: 'switch',
          name: 'autoGo',
          title: '自动跳转',
          content: '开启后，员工接通电话后会自动跳转到呼叫中心页面'
        },
        {
          id: 'b',
          type: 'switch',
          name: 'ringCard',
          title: '振铃卡片',
          content:
            '开启后，当呼叫转到员工接待员工振铃待接起时，通话条会自动展开。提示员工接听，便于查看客户信息，卡片可以收起'
        },
        {
          id: 'c',
          type: 'input',
          name: 'browserAlert',
          title: '浏览器提醒',
          content:
            '开启后，员工振铃时浏览器会提醒，便于员工在浏览器其他标签页时提示员工来电。点击提醒窗口，可跳转至系统呼叫中心',
          Option: {
            label: '每次展示时长',
            labelTip: '可设置0～30秒，0秒为不展示提示',
            inputName: 'showTime',
            unit: '秒'
          }
        }
      ],
      form: {
        autoGo: false,
        ringCard: false,
        browserAlert: false,
        showTime: 3,
        defaultLoginStatus: '1'
      },
      // 表单校验
      rules: {
        showTime: [{ required: true, message: '请输入0-30内的整数', type: 'number', min: 0, max: 30 }]
      }
    })

    // 滚动事件，对应右侧更改
    const onScroll = (obj: any) => {
      // const arrayOfDocFonts = document.getElementsByClassName('info-alert')
      for (var i = 0; i < state.navArr.length; i++) {
        if (state.navArr[i].id != '') {
          const offsetHight = (document as any).getElementById(`${state.navArr[i].id}`).offsetTop
          if (obj.scrollTop >= offsetHight) {
            state.toId = state.navArr[i].id
          }
        }
      }
    }
    function onScrollNav(link: string) {
      if ((document as any).getElementById(link)) {
        ;(document as any).getElementById(link).scrollIntoView({ behavior: 'smooth' })
      }
    }
    function callList() {
      getAgentConfig({}).then((res) => {
        if (res && res.success) {
          state.form = res.data.frontCallConfig || {}
        }
      })
    }
    const instance: any = getCurrentInstance()
    function settingSave() {
      const frontCallConfig: any = { ...state.form }
      instance?.refs.ruleFormRef.validate((valid: boolean) => {
        if (valid) {
          updateAgentConfig({ frontCallConfig }).then((res) => {
            if (res && res.success) {
              ElMessage({ message: '保存成功', type: 'success' })
              clientSettingModule().setFrontCallConfig(frontCallConfig)
            }
          })
        }
      })
    }
    onMounted(() => {
      callList()
    })

    return { onScrollNav, onScroll, ...toRefs(state), settingSave }
  }
})
</script>

<style lang="stylus" scoped>
.left-content {
}

.theme {
  display: flex;
  width: 100%;

  .left {
    width: 80%;
  }

  .right {
    width 20%
    padding: 24px 0;
    position: relative;
  }
  .center-card{
    padding: 24px;
  }
  .footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    width: calc(100% - 300px);
    height: 60px;
    background: #FFFFFF;
    border-top: 1px solid var(--mc-gray3-color);
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    .footer-button {
      padding: 0 20px;
    }
  }
}
</style>
